<template>
  <!-- 二级菜单 -->
  <el-sub-menu v-if="item.children" :index="item.path">
      <el-icon>
        <component :is="item.icon" />
      </el-icon>
    <template #title>
      <span>{{ item.name }}</span>
    </template>
    <!-- 递归 二级以上菜单 -->
    <my-menu v-for="(child, cindex) in item.children" :key="cindex" :item="child"></my-menu>
  </el-sub-menu>
  <!-- 一级菜单 -->
  <el-menu-item v-else :index="item.path" @click="add(item.name,item.path,item.icon)">
    <el-icon>
        <component :is="item.icon" />
      </el-icon>
    <template #title>
      <span>{{ item.name }}</span>
    </template>
  </el-menu-item>
</template>

<script>
import { defineComponent, onMounted } from "vue";
import { useTabsStore, } from '@/stores/modules/tabs';
export default defineComponent({
  name: "MyMenu",
  props: {
    item: {
      type: Object,
      required: true,
    },
  },

  setup() {
    let useTabs = useTabsStore()
    let {addTab,setCurrentTab} = useTabs
    function add(name,path,icon) {
      addTab(name,path,icon)
      setCurrentTab(name,path)

    }
    return { add };
  },
});
</script>

<style scoped>
.is-active {
  background-color: #38b781;
  color: #fff !important;
  border-radius: 10px !important;

  div {
    span {
      color: #fff;
    }
  }
}
.el-menu-item:hover {
  background-color: #38b781 !important;
  color: #fff !important ;
  border-radius: 10px !important;
}
::v-deep .el-sub-menu__title:hover {
  background-color: #38b781 !important;
  color: #fff !important ;
  border-radius: 10px !important;
}
</style>
